<template>
  <div class="wrap clearfix">
    <!-- 侧边栏 -->
    <Aside></Aside>
    <!-- 主体部分 -->
    <div class="u-main f-fl" v-if="singerList != false">
      <!-- 入驻歌手 -->
      <div class="u-title" v-if="visible">
        <h3>
          <span>入驻歌手</span>
        </h3>
        <router-link to="/discover/artist/signed" class="more">更多 ></router-link>
      </div>
      <ul class="singer-list" v-if="visible && signedList != false">
        <!-- 图片展示 -->
        <li v-for="i1 in 10" :key="signedList[i1 - 1].id">
          <div class="u-cover">
            <img :src="signedList[i1 - 1].img1v1Url + '?param=130y130'" alt="" />
            <router-link :to="`/artist?id=${signedList[i1 - 1].id}`" class="msk"></router-link>
          </div>
          <p>
            <router-link :to="`/artist?id=${signedList[i1 - 1].id}`" class="name"
              >{{ signedList[i1 - 1].name }}
            </router-link>
            <router-link
              :to="`/user/home?id=${signedList[i1 - 1].accountId}`"
              class="u-icn-wrap"
              v-if="signedList[i1 - 1].accountId"
              ><i class="u-icn"></i
            ></router-link>
          </p>
        </li>
      </ul>
      <!-- 标题部分 -->
      <div class="u-title">
        <h3>
          <span>{{ visible ? '热门歌手' : title[singerParams.area][singerParams.type] }}</span>
        </h3>
      </div>
      <!-- 按姓氏选择 -->
      <ul id="inital-selector" v-if="!visible">
        <li>
          <router-link
            to="/discover/artist?initial=-1"
            class="hot"
            :class="currentInital == -1 ? 'current' : ''"
            >热门</router-link
          >
        </li>
        <li v-for="(apha, index) in initalSelectorList" :key="index">
          <router-link
            :to="'/discover/artist?initial=' + apha"
            :class="currentInital == apha ? 'current' : ''"
            >{{ apha }}</router-link
          >
          <!-- <a href="">{{ apha }}</a> -->
        </li>
        <li>
          <router-link
            to="/discover/artist?initial=0"
            class="other"
            :class="currentInital == 0 ? 'current' : ''"
            >其他</router-link
          >
        </li>
      </ul>
      <!-- 歌手列表 -->
      <ul class="singer-list">
        <!-- 图片展示 -->
        <li v-for="i1 in 10" :key="singerList[i1 - 1].id" :class="i1 > 5 ? 'line' : ''">
          <div class="u-cover">
            <img :src="singerList[i1 - 1].img1v1Url + '?param=130y130'" alt="" />
            <router-link :to="`/artist?id=${singerList[i1 - 1].id}`" class="msk"></router-link>
          </div>
          <p>
            <router-link :to="`/artist?id=${singerList[i1 - 1].id}`" class="name"
              >{{ singerList[i1 - 1].name }}
            </router-link>
            <router-link
              :to="`/user/home?id=${singerList[i1 - 1].accountId}`"
              class="u-icn-wrap"
              v-if="singerList[i1 - 1].accountId"
              ><i class="u-icn"></i
            ></router-link>
          </p>
        </li>
        <!-- 无图片展示 -->
        <li v-for="i2 in singerList.length - 10" :key="singerList[i2 - 1 + 10].id" class="sml">
          <router-link :to="`/artist?id=${singerList[i2 - 1 + 10].id}`" class="name"
            >{{ singerList[i2 - 1 + 10].name }}
          </router-link>
          <router-link
            :to="`/user/home?id=${singerList[i2 - 1 + 10].accountId}`"
            class="u-icn-wrap"
            v-if="singerList[i2 - 1 + 10].accountId"
            ><i class="u-icn"></i
          ></router-link>
          <!-- <a href="" class="name">{{ singerList[i2 - 1 + 10].name }} </a>
          <a href="" class="u-icn-wrap" v-if="singerList[i2 - 1 + 10].accountId"
            ><i class="u-icn"></i
          ></a> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Aside from '../Aside/Aside.vue'
export default {
  components: { Aside },
  data() {
    return {
      // 字母列表
      initalSelectorList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      title: {
        7: { 1: '华语男歌手', 2: '华语女歌手', 3: '华语组合/乐队' },
        96: { 1: '欧美男歌手', 2: '欧美女歌手', 3: '欧美组合/乐队' },
        8: { 1: '日本男歌手', 2: '日本女歌手', 3: '日本组合/乐队' },
        16: { 1: '韩国男歌手', 2: '韩国女歌手', 3: '韩国组合/乐队' },
        0: { 1: '其他男歌手', 2: '其他女歌手', 3: '其他组合/乐队' }
      },
      // 显示入驻歌手部分
      visible: true,
      // 入驻歌手列表
      signedList: [],
      // 获取歌手列表参数
      singerParams: { type: 1, area: 7, initial: -1, limit: 100, offset: 0 },
      // 歌手列表
      singerList: [],
      // 当前选择的姓
      currentInital: -1
    }
  },
  methods: {
    // 获取歌手列表
    async getSingerList() {
      // console.log(this.$route.query)
      if (this.$route.query.initial) {
        this.singerParams = Object.assign(this.singerParams, this.$route.query)
        const { data } = await this.$http.get('/artist/list', { params: this.singerParams })
        this.singerList = data.artists
      } else {
        const { data } = await this.$http.get('/top/artists?offset=0&limit=100')
        this.singerList = data.artists
      }

      // console.log(data)
      // this.singerList = data.artists
    },
    // 获取入驻歌手列表
    async getSignedList() {
      // console.log(this.$route.query)
      const { data } = await this.$http.get('/artist/list?type=-1&area=-1&initial=-1')
      // console.log(data.artists)
      data.artists.forEach(item => {
        if (item.accountId) {
          this.signedList.push(item)
        }
      })
      // console.log(this.signedList)

      // this.singerList = data.artists
    }
  },
  watch: {
    $route() {
      // 当前姓氏
      this.currentInital = this.$route.query.initial
      // 判断是否为首页，展示入驻歌手等结构
      if (this.$route.query.initial) {
        this.visible = false
        // console.log(this.visible)
      } else {
        this.visible = true
      }
      // this.currentInital = this.$route.query.initial
      // 获取歌手列表
      this.getSingerList()
    }
  },
  created() {
    // 获取歌手列表
    this.getSingerList()
    this.getSignedList()
    // 判断是否为首页，展示入驻歌手等结构
    if (this.$route.query.initial) {
      this.visible = false
      // console.log(this.visible)
    } else {
      this.visible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import url(./ArtistIndex.less);
</style>
